<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>时光轴</title>
<link rel="stylesheet" href="css/time.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
</head>
<body>
<?php include('header.php');?>
<div id="story">
    <div id="time-line" class="time-line" style="display: none">
        <span class="human"></span>
        <span class="cloth cloth_fukuan" style="display: inline;"></span>
        <span class="scene scene_shan"></span>
    </div>
    <div class="line" style="display: block;">
    <span class="huojian" style="left: 21px;"></span>
    <div class="pageDotsLine"></div>
        <div class="pageDotsLine2" style="width: 0px;"></div>
        <div class="pageDots">
            <a href="javascript:void(0);" title="" class="pageDot page_start passed" style="left:31px" story="page_start" index="0" pindex="0" data-spm-anchor-id="0.0.0.0"></a>
            <a href="javascript:void(0);" title="" class="pageDot" style="left:117px" story="page_decoration2008" index="4" pindex="6"></a>
            <a href="javascript:void(0);" title="" class="pageDot" style="left:203px" story="page_decoration2008" index="4" pindex="6"></a>
            <a href="javascript:void(0);" title="" class="pageDot" style="left:289px" story="page_decoration2008" index="4" pindex="6"></a>
            <a href="javascript:void(0);" title="" class="pageDot" style="left:375px" story="page_dog2009" index="6" pindex="9"></a>
            <a href="javascript:void(0);" title="" class="pageDot" style="left:461px" story="page_travel2010" index="9" pindex="13"></a>
            <a href="javascript:void(0);" title="" class="pageDot" style="left:547px" story="page_end" index="12" pindex="21"></a>
            <a href="javascript:void(0);" title="" class="pageDot" style="left:636px" story="page_end" index="12" pindex="21"></a>
            <a href="javascript:void(0);" title="" class="pageDot page_end" style="left:713px" story="page_end" index="12" pindex="21"></a>
        </div>
     </div>
    <div id="pageList">
        <div class="page nofigure" figure="0" style="background:#f4efe7;">
                <p class="title3">开启时光之旅</p>
                <div class="share_btn">
                    <span class="leftSide"></span>
                    <span class="rightSide"></span>
                    <a href="javascript:;" id="start_machine">启动时光机</a>
                </div>
        </div>
        <div class="page nofigure" figure="0" style="background:#f4efe7;">
                    <p>时光机无法暂停，请睁大眼睛，准备穿越…</p>
        </div>
        <div class="page" figure="1" cloth="fukuan" scene="shan" story="page_fukuan" index="2" style="background:#f4efe7;">
            <div class="content-me" style="display: block;">
                <span class="page-title2" style="background:#ff6f25;">故事的开始</span>
                <p>某年某月某日。</p>
                <p>冰淇林陪伴的燥热夏日，</p>
                <p>我们一起来到了这里</p>
            </div>
        </div>
        <div class="page" figure="1" cloth="summer" scene="qie" story="page_fukuan" index="4" style="background:#f4efe7;">
            <div class="content-me" style="display: block;">
                <span class="page-title2" style="background:#ff6f25;">那年的夏天</span>
                <p>还记得那些懵懂的少年么</p>
                <p>为了那些梦想</p>
                <p>我们付出了多少汗水</p>
            </div>
        </div>
        <div class="page" figure="1" cloth="winter" scene="xiangji" story="page_fukuan" index="5" style="background:#f4efe7;">
            <div class="content-me" style="display: block;">
                <span class="page-title2" style="background:#ff6f25;">那年的冬天</span>
                <p>那些闪亮的时光里</p>
                <p>我们搅过的基</p>
                <p>翘过的课</p>
                <p>吹过的牛逼</p>
            </div>
        </div>
        <div class="page" figure="1" cloth="young" scene="tree" story="page_fukuan" index="6" style="background:#f4efe7;">
            <div class="content-me" style="display: block;">
                <span class="page-title2" style="background:#ff6f25;">闪耀的青春</span>
                <p>谁没有闪耀过的青春啊</p>
                <p>只是时光</p>
                <p>带走了我们的愿望</p>
            </div>
        </div>
        <div class="page" figure="1" cloth="school" scene="bike" story="page_fukuan" index="7" style="background:#f4efe7;">
            <div class="content-me" style="display: block;">
                <span class="page-title2" style="background:#ff6f25;">各奔东西</span>
                <p>曾经不休边幅的少年</p>
                <p>又带着新的梦想</p>
                <p>开始新的旅程</p>
            </div>
        </div>
        <div class="page bend" figure="0" style="background:#f4efe7;">
            <h1>就这么结束了？</h1>
        </div>
        <div class="page end" figure="0" style="background:#f4efe7;">
            <div>
                <h1 class="title4">也许真的就这么结束了!</h1>
                <h1 class="title4">但我们失去的时光还不多，</h1>
                <br>
                <h1 class="title4">那些别人怀念的过去啊，</h1>
                <h1 class="title4">正是我们握在手里的当下，和未来。 </h1>
                <br>
                <h1 class="title4">去快活啊，</h1>
                <h1 class="title4">别似他们等到真需要时光机的那一天。</h1>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
 function Pages(opt){
    this.size = opt.size;
    this.fullSize = opt.size;
    }
Pages.prototype.changeSize = function(){
    var self = this;

    var line2width = parseInt($($(".line a")[self.fullSize - self.size]).css("left")) - 31;
    //移动红线和火箭
    if(line2width){
        $(".line .pageDotsLine2").animate({width: line2width + 'px'},"fast","swing",function(){
            $($(".line a")[self.fullSize - self.size]).addClass("passed");
            });
        $(".line .huojian").animate({left: line2width + 21 + 'px'},"fast","swing",function(){
            self.move();
            });
        }
    //结束前动画
    if(self.size == 1)
    {
        $("#time-line").show();
        $("#time-line .scene").hide();
        $("#pageList").css("margin-left", "-740px");
        $("#pageList").animate({marginLeft: -740 * (self.fullSize -1) + "px"}, 5000,"swing",function(){$("#time-line").hide()});
        return;
    }
    else
    {
        //场景左移动
        $("#pageList").animate({marginLeft: '-=740px'}, "slow","swing");
    }
    
    if($($("#pageList div.page")[self.fullSize - self.size]).attr("figure") == 0)
    {
        $("#time-line").hide();
        return;
    }
    else
    {
        $("#time-line").show();
    }
     var className = $($("#pageList div.page")[self.fullSize - self.size]).attr("cloth");
     var sceneName = $($("#pageList div.page")[self.fullSize - self.size]).attr("scene");
     //服装切换效果
     if(className)
     {
         className = "cloth_" + className;
         $("#time-line span").eq(1).fadeTo(100,0.5);
         $("#time-line span").eq(1).removeClass();
         $("#time-line span").eq(1).addClass("cloth " + className);
         $("#time-line span").eq(1).fadeTo(100,1);
     }
     //场景切换效果
     if(sceneName)
     {
         sceneName = "scene_" + sceneName;
         $("#time-line span").eq(2).removeClass();
         $("#time-line span").eq(2).addClass("scene " + sceneName);
         $("#time-line span").eq(2).css("margin-left","300px");
         $("#time-line span").eq(2).animate({marginLeft: '-20px'},500,"linear",function(){
             $("#time-line span").eq(2).animate({marginLeft: '0px'},300,"linear");
             });
     }
}

Pages.prototype.move = function(){
    var self =this;
    self.size = self.size - 1;

    function call(){
        if(self.size<=0)
        {
            return;
        }
        setTimeout(function(){self.changeSize()},4000);
        }

    if(self.fullSize - self.size == 1)
    {
        $("#pageList").animate({width: '+=740px'},"fast","swing");
        setTimeout(function(){self.changeSize()},200);
    }
    else
    {
        $("#pageList").animate({width: '+=740px'},"fast","swing",call());
    }

      }

$(function(){
    $("#start_machine").click(function(){
        var test = new Pages({"size":$("#pageList div.page").length});
        test.move();
        });
});


</script>
</html>